<template>
    <div class="moment" @click="$router.push(`/moment/${moment.momentId}`)">
        <h2 class="moment-title">{{moment.title}}</h2>
        <div class="moment-desc">
            {{moment.description}}
        </div>
        <div class="other-info">
            <el-tag type="danger" style="margin-right: 5px" size="mini">{{fullName}}</el-tag>
            <span class="info">{{moment.createTime | format('YYYY-MM-DD HH:mm')}}</span>
            <span class="line"></span>
            <span class="info">{{moment.viewNum}}-阅读</span>
            <span class="line"></span>
            <span class="info">{{moment.markNum}}-Mark</span>
            <span class="line"></span>
            <span class="info">{{moment.commentNum}}-评论</span>
        </div>
        <div class="tag-list">
            <el-tag type="success" style="margin-right: 8px" size="mini" v-for="(tag,index) in moment.tags"
                    :key="index">{{tag.name}}
            </el-tag>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Moment',
        data() {
            return {};
        },
        computed: {
            fullName() {
                if (this.moment && this.moment.addr) {
                    let fullName = ""
                    this.moment.addr.forEach(r => {
                        fullName = fullName + r.name + " "
                    })
                    return fullName
                }
                return "全国"
            }
        },
        props: {
            moment: {
                type: Object,
                required: true
            }
        },
        methods: {},
        mounted() {
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .moment {
        cursor: pointer;
        margin-bottom: 25px;
        padding: 0 20px 15px 20px;

        border-bottom: 1px solid #EBEEF5;

        .moment-title:hover {
            color: #E6A23C;
        }

        .moment-title {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            margin-bottom: 10px;
            color: #303133;
            cursor: pointer;
        }

        .moment-desc {

            font-size: 14px;
            line-height: 20px;
            color: #909399;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .tag-list {
            margin-top: 5px;
        }

        .other-info {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 13px;
            color: #909399;

            > span.info {
                /*margin: 0 5px;*/
            }

            > span.line {
                margin: 0 10px;
                width: 1px;
                height: 13px;
                background-color: #EBEEF5;
            }
        }


    }
</style>